/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 排序算子表单配置
 -->
<template>
    <div class="operate_form">
        <sf-form ref="sortForm"
                 class="drawer-form__container"
                 :label-width="80">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>排序方式</lang>
                </sf-fieldlabel>
                <sf-select v-model="sortType"
                           :default-width="fieldWidth"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="typeList" />
            </sf-form-item>
            <sf-form-item v-if="formData.type==='index'"
                          class="form-item--first align-center">   
                <sf-fieldlabel>
                    <lang>索引方式</lang>
                </sf-fieldlabel>
                <sf-radio-group v-model="formData.index_type">
                    <sf-radio name="index_type"
                              :default-disabled="disabledStatus"
                              check-value="row">
                        行索引
                    </sf-radio>
                    <sf-radio name="index_type"
                              :default-disabled="disabledStatus"
                              check-value="column">
                        列索引
                    </sf-radio>
                </sf-radio-group>
            </sf-form-item>
            <sf-form-item v-else
                          class="form-item--first">
                <sf-fieldlabel>
                    <lang>指定字段名</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.column"
                           :default-width="fieldWidth"
                           :allow-blank="false"
                           :allow-search="true"
                           :default-disabled="disabledStatus"
                           :options="fieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first  align-center">
                <sf-fieldlabel>
                    <lang>升降序</lang>
                </sf-fieldlabel>
                <sf-radio-group v-model="formData.order">
                    <sf-radio name="order"
                              :default-disabled="disabledStatus"
                              :check-value="true">
                        升序
                    </sf-radio>
                    <sf-radio name="order"
                              :default-disabled="disabledStatus"
                              :check-value="false">
                        降序
                    </sf-radio>
                </sf-radio-group>
            </sf-form-item>
            <div v-if="!disabledStatus && showOperateBtn"
                 class="add-operate__btn">
                <sf-button-primary 
                    class="btn-primary m-r10"
                    @click.native="_submit">
                    <lang>确定</lang>
                </sf-button-primary>
                <sf-button @click.native="_cancel">
                    <lang>取消</lang>
                </sf-button>
            </div>
        </sf-form>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    SORT_DEFAULT_DATA,
    ADD_DEFAULT_WIDTH,
    DEFAULT_WIDTH
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'SortForm'
})
export default class SortForm extends Vue {
    @Ref() sortForm!: SfForm

    // TODO: REMOVE ANY
 

    formData = { ...SORT_DEFAULT_DATA }
    sortType = 'column'
    typeList = [{
        label:_('按字段'),
        value:'column'
    }, {
        label:_('按索引'),
        value:'index',
        disabled:true
    }]
    fieldList = []
    timeFieldList = []
    disabledStatus = false
    showOperateBtn = false
    get fieldWidth () {
        return this.showOperateBtn ? DEFAULT_WIDTH : ADD_DEFAULT_WIDTH;
    }
    

    reset () {
        this.formData = deepClone(SORT_DEFAULT_DATA);
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.sortForm.clearInvalid();
        });
    }
    getJsonValue () {
        return this.formData;
    }

    _submit () {
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }

    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }

    isValid () {
        return this.sortForm.isValid();
    }
};
</script>



